import { BAST_FONT_SIZE, DESIGN_HEIGHT, DESIGN_WIDTH } from '@/constant';

const pxToRem = (px: number): string => `${px / BAST_FONT_SIZE}rem`;
const vhToPx = (vh: number) => (vh * DESIGN_HEIGHT) / 100;
const vwToPx = (vw: number) => (vw * DESIGN_WIDTH) / 100;
export const remToPx = (rem: number) => rem * BAST_FONT_SIZE;

export const getUnit = (value: string | number): string => {
  return value.toString().replace(/[0-9.]/g, '');
};

export const getValue = (value: string | number): string => {
  return value.toString().replace(/[a-z]/g, '');
};

export const xxToRem = (value: string | number): string => {
  const unit = getUnit(value);
  const valueNum = getValue(value);
  if (unit === 'px' || unit === '') {
    return pxToRem(Number(valueNum));
  } else if (unit === 'vh') {
    return pxToRem(vhToPx(Number(valueNum)));
  } else if (unit === 'vw') {
    return pxToRem(vwToPx(Number(valueNum)));
  }
  return valueNum.toString() + 'px';
};
